<template>
  <div>
    <Header />
    <div class="trade">
      <!-- <TabBase v-model="tab" :options="tabList" /> -->
      <Swap v-if="path === 'swap'" />
      <LimitOrder v-if="path === 'limit-order'" />
      <Liquidity v-if="path === 'liquidity'" />
      <CrossChain v-if="path === 'cross-chain'" />
      <GasPrice v-if="path === 'swap'" />
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import GasPrice from "@/components/GasPrice";
import TabBase from "@/components/common/TabBase";
import Swap from "./Swap";
import LimitOrder from "./LimitOrder";
import Liquidity from "./Liquidity";
import CrossChain from "./CrossChain";

export default {
  components: {
    Header,
    GasPrice,
    TabBase,
    Swap,
    LimitOrder,
    Liquidity,
    CrossChain
  },
  computed: {
    path() {
      return this.$route.path.toLowerCase().replace(/^\//gi, '');
    },
  },
  // data() {
  //   return {
  //     tab: "01",
  //     tabList: [
  //       {
  //         code: "01",
  //         name: "Swap",
  //       },
  //       {
  //         code: "02",
  //         name: "Limit Order",
  //       },
  //       {
  //         code: "03",
  //         name: "Liquidity",
  //       },
  //     ],
  //   };
  // },
};
</script>

<style lang="scss" scoped>
.trade {
  padding-top: 50px;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
